<!-- home页面 -->
<template>
	<div>
		<el-container>
			<el-header class="home-header">
				<div class="title">职业院校电子商务大赛评审系统</div>
				<div>



					<el-dropdown class="dropdown" @command="commandHandler">
						<span class="el-dropdown-link">
							<span class="welcome">欢迎 {{user.username}} 登录</span><i><img src="../assets/logo.png" height="40px" width="40px"
								 style="border-radius: 100%; margin-left: 18px;" /></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item style="margin: 0 20px;" command="personalCenter">个人中心</el-dropdown-item>

							<el-dropdown-item style="margin: 0 20px;" command="logout">注销登录</el-dropdown-item>
						</el-dropdown-menu>

					</el-dropdown>
				</div>

			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu @select="menuClick" :default-openeds="['1','2', '3']">
						<template v-if="user.position == '学生'">
							<el-submenu index="1">
								<template slot="title" style=""><i class="el-icon-message">学生操作菜单</i></template>
								<el-menu-item index="/join">参加比赛</el-menu-item>
								<el-menu-item index="/submit">提交作品</el-menu-item>
								<el-menu-item index="/query">成绩查询</el-menu-item>
								<el-menu-item index="/scorelist">成绩榜单</el-menu-item>
							</el-submenu>
						</template>
						<template v-if="user.position == '管理员'">
							<el-submenu index="2">
								<template slot="title"><i class="el-icon-menu"></i>管理员操作菜单</template>
								<el-menu-item index="/group">分组管理</el-menu-item>
								<el-menu-item index="/student">学生管理</el-menu-item>
								<el-menu-item index="/reviewers">评审管理</el-menu-item>
								<el-menu-item index="/works">作品管理</el-menu-item>
								<el-menu-item index="/competition">比赛管理</el-menu-item>
								<el-menu-item index="/notice">公告管理</el-menu-item>
							</el-submenu>
						</template>
						<template v-if="user.position == '评审'">
							<el-submenu index="3">
								<template slot="title"><i class="el-icon-setting"></i>评审操作菜单</template>
								<el-menu-item index="/scoring">在线打分</el-menu-item>
							</el-submenu>
						</template>
					</el-menu>
				</el-aside>
				<el-container>
					<el-main>
						<el-breadcrumb separator="/" v-if="this.$router.currentRoute.path!='/home'" style="padding: 10px 0 0 10px;">
							<el-breadcrumb-item :to="{ path: '/home' }" style="font-size: 17px;">首页</el-breadcrumb-item>
							<el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
						</el-breadcrumb>
						<div v-if="this.$router.currentRoute.path == '/home'" style="display: flex; flex-direction:column;align-items: center;">
							<div class="home-text">
								欢迎来到职业院校电子商务大赛评审系统!!!
							</div>
							<div class="el-calendar-div">
								<el-divider content-position="right">让别人来享受生活，我们来追逐梦想</el-divider>
							</div>


						</div>
						<router-view class="home-router-view"></router-view>
					</el-main>

				</el-container>
			</el-container>
		</el-container>
		<el-drawer title="个人中心" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer" ref="drawer" v-loading="loading"
		 element-loading-text="更新中~" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="demo-drawer__content">
				<el-form :model="users">

					<el-form-item label="用户名" label-width="100px">
						<el-input v-model="users.username" autocomplete="off" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="身份" label-width="100px">
						<el-input v-model="users.position" :disabled="true" autocomplete="off" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="所属院校" label-width="100px">
						<el-input v-model="users.email" autocomplete="off" disabled style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="地址" label-width="100px">
						<el-input v-model="users.address" autocomplete="off" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="电话" label-width="100px">
						<el-input v-model="users.phone" :disabled="true" autocomplete="off" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="密码" label-width="100px">
						<el-input placeholder="请输入密码" v-model="users.password" show-password style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" label-width="100px">
						<el-input placeholder="请输入密码" v-model="rePassword" show-password style="width: 300px;"></el-input>
					</el-form-item>
				</el-form>
				<div style="display: flex; justify-content: center; align-items: center; margin: 30px;">
					<el-button @click="dialog = false">取消</el-button>
					<el-button type="primary" @click="updateuserinfo">提交</el-button>
				</div>
			</div>
		</el-drawer>


		<!-- </el-drawer> -->

	</div>
</template>

<script>
	export default {
		name: 'Home',
		//定义的数据
		data() {
			return {
				// 把user对象取出来
				user: JSON.parse(window.sessionStorage.getItem("user")),
				dialog: false,
				users: {},
				loading: false,
				rePassword: "",
				changePassword: false,
				imageUrl: '',
			}
		},
		//计算属性
		computed: {
			prop() {
				let data = {
					subfield: false, // 单双栏模式
					defaultOpen: 'preview', //edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
					editable: false,
					toolbarsFlag: false,
					scrollStyle: true
				}
				return data
			}
		},
		//方法
		methods: {

			menuClick(index) {
				this.$router.push(index);
			},

			updateuserinfo() {
				if (this.users.password && !this.rePassword) {
					return this.$message({
						message: '请输入确认密码！',
						type: 'warning'
					});
				}
				if (!this.users.password && this.rePassword) {
					return this.$message({
						message: '请输入密码！',
						type: 'warning'
					});
				}
				if (this.users.password && this.rePassword) {
					if (this.rePassword != this.users.password) {
						return this.$message({
							message: '两次密码输入不一致',
							type: 'warning'
						});
					}
					if (this.rePassword == this.users.password) {
						this.changePassword = true;
					}
				}

				this.loading = true;
				let url = "";
				if (this.user.position == "学生") {
					url = "/users/changeMassage"
				} else if (this.user.position == "管理员") {
					url = "/admins/changeMassage"
				} else if (this.user.position == "评审") {
					url = "/reviewers/changeMassage"
				}
				this.putRequest(url, this.users).then(res => {
					this.loading = false;
					this.rePassword = "";
					this.users.password = "";
					this.openPersionalCenter();
				})
				if (this.changePassword) {
					window.sessionStorage.removeItem("user");
					this.$router.replace("/");
				}
			},
			openPersionalCenter() {
				this.getRequest("/users/userinfo?id=" + this.user.id + '&position=' + this.user.position).then(res => {
					this.users = res.obj;
				})
			},
			commandHandler(cmd) {
				if (cmd == 'logout') {
					this.$confirm('将要注销登录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						window.sessionStorage.removeItem("user");
						this.$router.replace("/");
					})
				}
				if (cmd == 'personalCenter') {
					this.openPersionalCenter();
					this.dialog = true;
				}
			}
		},
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.home-router-view {
		padding: 20px 0 20px 20px;
	}

	.home-header {

		background: #007cba;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 30px;

	}

	.home-header .title {
		font-size: 30px;
		font-family: 华文行楷;
		color: #FFFFFF;
	}

	.home-header .dropdown {
		cursor: pointer;
	}

	.el-dropdown-link {
		display: flex;
		align-items: center;
	}

	.welcome {
		font-size: 25px;
		font-family: 华文行楷;
		color: #EAEAEA;
	}

	.home-text {
		font-size: 35px;
		font-weight: bolder;
		text-align: center;
		padding: 50px 0;
		color: #00AA7F;
		font-family: 华文行楷;

	}

	.el-calendar-div {
		width: 50%;
		height: 25%;
		font-size: 30px;
		color: #00AA7F;
		font-family: 华文行楷;
		margin: 20px 0;
	}

	.el-calendar-table .el-calendar-day {
		height: 0px !important;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
